<template>
  <div class="profile">
    <div class="page-header">
      <h2 class="page-title">个人中心</h2>
      <p class="page-subtitle">管理您的个人信息和账户设置</p>
    </div>
    
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="avatar-card" shadow="hover">
          <div class="avatar-container">
            <el-avatar :size="120" :src="userInfo?.avatar || ''" class="user-avatar">
              {{ userInfo?.username?.charAt(0).toUpperCase() || 'U' }}
            </el-avatar>
            <div class="avatar-info">
              <h3>{{ userInfo?.username || '未登录' }}</h3>
              <p>{{ userInfo?.email || '-' }}</p>
            </div>
            <el-button type="primary" plain @click="showAvatarDialog = true">
              <el-icon><Camera /></el-icon>
              更换头像
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card class="info-card" shadow="hover">
          <template #header>
            <span>账户信息</span>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户名">
              <span class="info-value">{{ userInfo?.username || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              <span class="info-value">{{ userInfo?.email || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户ID">
              <span class="info-value">{{ userInfo?.id || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
              <span class="info-value">{{ formatDate(userInfo?.createdAt) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="账户状态" :span="2">
              <el-tag type="success" effect="dark">正常</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <el-card class="action-card" shadow="hover" style="margin-top: 24px">
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="action-buttons">
            <el-button @click="$router.push('/wallet')">
              <el-icon><Wallet /></el-icon>
              我的钱包
            </el-button>
            <el-button @click="$router.push('/transactions')">
              <el-icon><List /></el-icon>
              交易记录
            </el-button>
            <el-button @click="$router.push('/settings')">
              <el-icon><Setting /></el-icon>
              账户设置
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 更换头像对话框 -->
    <el-dialog v-model="showAvatarDialog" title="更换头像" width="400px">
      <div class="avatar-upload">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handleAvatarChange"
        >
          <img v-if="avatarPreview" :src="avatarPreview" class="avatar-preview" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <p class="upload-tip">支持 JPG、PNG 格式，文件大小不超过 2MB</p>
      </div>
      <template #footer>
        <el-button @click="showAvatarDialog = false">取消</el-button>
        <el-button type="primary" @click="handleAvatarSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Camera, Plus, Wallet, List, Setting } from '@element-plus/icons-vue'
import { useAuthStore } from '../store/auth'

const authStore = useAuthStore()
const userInfo = computed(() => authStore.userInfo)
const showAvatarDialog = ref(false)
const avatarPreview = ref('')

const formatDate = (dateStr?: string) => {
  if (!dateStr) return '-'
  try {
    return new Date(dateStr).toLocaleString('zh-CN')
  } catch {
    return dateStr
  }
}

const handleAvatarChange = (file: any) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    avatarPreview.value = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

const handleAvatarSubmit = () => {
  ElMessage.info('头像上传功能开发中')
  showAvatarDialog.value = false
}
</script>

<style scoped>
.profile {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.avatar-card {
  height: 100%;
}

.avatar-container {
  text-align: center;
  padding: 20px 0;
}

.user-avatar {
  border: 4px solid #f0f2f5;
  margin-bottom: 16px;
}

.avatar-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.avatar-info p {
  font-size: 14px;
  color: #909399;
  margin: 0 0 20px 0;
}

.info-card {
  height: 100%;
}

.info-value {
  color: #303133;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.avatar-upload {
  text-align: center;
}

.avatar-uploader {
  display: inline-block;
  margin-bottom: 16px;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-preview {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin: 0;
}
</style>

